<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="example">
    <input type="text"   v-model="msg" />
    <input type="button"  value="dianji" @click="clickDt" />
    <user-profile ref="profile"></user-profile>
</div>
<script src="../js/vue.min.js"></script>
<script>
    Vue.component('user-profile', {
        template: '<span>{{ msg }}</span>',
        data: function () {
            return {
                msg: 123
            };
        },
        methods: {
            greet: function (msg) {
//                msg是调用的父组件的  greet相当于是父组件的一个方法
                console.log(this.msg)
                console.log(msg);
            }
        }

    })
    //      var parent = new Vue({el: '#parent'});
    //      var child = parent.$refs.profile;
    //      child.greet();
    new Vue({
        el:"#example",
        data:{
            msg:""
        },
        methods: {
            clickDt(){
//                父组件调用子组件事件
                this.$refs.profile.greet(this.msg);
            }
        }
    })

</script>
</body>
</html>